<template>
  <div>
    <h3>测试</h3>
    <mypagetools :showLeft="true">
      <template #left>
        我是左侧的内容
      </template>
      <template #right>
        <el-button>我是自定义的按钮</el-button>
      </template>
    </mypagetools>
    <h3>使用 excel 导入</h3>
    <myupload></myupload>
    <h3>向对象服务 COS 中存在图片</h3>
    <input type="file" @change="change" ref="myfile" />
    <h3>使用自己封装的图片上传组件</h3>
    <imgUpload :imageUrl.sync="imageUrl"></imgUpload>
    <h3>使用 qrcode 将地址转为二维码</h3>
    <div>
      <button @click="fn">
        点我将百度网址转为一个二维码并且显示在下方的 cavans 中
      </button>
    </div>
    <!-- // 添加一个转换后的显示容器 -->
    <canvas ref="mycanvas"></canvas>
  </div>
</template>

<script>
// 导入 cos 对象
import COS from 'cos-js-sdk-v5'
// 导入对象
import QRcode from 'qrcode'
export default {
  data () {
    return {
      // 用来向资源服务器中上传资源
      cosObj: null,
      imageUrl: require('@/assets/common/head.jpg')
    }
  },
  methods: {
    // 将百度地址转为二维码
    fn () {
      QRcode.toCanvas(
        this.$refs.mycanvas, // 生成二维码后保存的容器
        'http://www.baidu.com', // 要转换的路径
        {
          // 相关配置信息
          width: 200,
          height: 200
        }
      )
    },
    change () {
      // 得到上传框中选中的图片
      const file = this.$refs.myfile.files[0]
      // 使用 cos 对象进行上传
      this.cosObj.putObject(
        {
          Bucket: 'hr74-1258199118' /* 必须 */,
          Region: 'ap-chengdu' /* 存储桶所在地域，必须字段 */,
          Key: file.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: file, // 上传文件对象
          onProgress: progressData => {
            // 上传的进度
            // progressData: 上传过程中的实时进度对象
            // console.log(JSON.stringify(progressData))
          }
        },
        (err, data) => {
          // 上传之后的回调函数
          // data: 上传成功后的返回值
          // err: 上传出错的错误信息
          console.log(err || data)
        }
      )
    }
  },
  components: {
    mypagetools: () => import('@/components/pagetools/index.vue'),
    myupload: () => import('@/components/excel/index.vue')
  },
  created () {
    // 初始 cos 对象
    this.cosObj = new COS({
      SecretId: 'AKIDJDsGOFqADySfbGdkbBUXJo2zlGUR8YgX',
      SecretKey: 'cx1pNeeNp0vYu0pMcdNq2QZR3OTHo31j'
    })
  }
}
</script>

<style></style>
